<template>
  <div>
    <div>
      功能名称 &nbsp;&nbsp;
      <el-select
        v-model="jurisdictionItem"
        placeholder="请选择"
        clearable
        style="width: 200px"
      >
        <el-option
          v-for="item in Jurisdiction"
          :key="item.jurisdictionId"
          :label="item.jurisdictionName"
          :value="item.jurisdictionId"
        ></el-option>
      </el-select>
      &nbsp;&nbsp;
      <el-button type="danger" @click="add()">权限分配</el-button>
    </div>

    <br />

    <div>
      <el-table :data="tableData" style="width: 70%">
        <el-table-column label="序号" width="60">
          <template #default="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>

        <el-table-column prop="jurisdictionName" label="功能" align="center" />

        <el-table-column prop="operationIds" label="操作权限" align="center" />

        <el-table-column prop="roleName" label="角色" align="center" />

        <el-table-column label="操作列" align="center">
          <template #default="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="del(scope.row.rjId)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <br />

    <div>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[15, 20, 35, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog v-model="dialogFormVisible" title="权限分配" width="500">
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="form"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
      >
        <el-table-column label="序号" width="60">
          <template #default="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>

        <el-form-item label="功能">
          <el-select v-model="form.jurisdictionId" disabled>
            <el-option
              v-for="item in Jurisdiction"
              :key="item.jurisdictionId"
              :label="item.jurisdictionName"
              :value="item.jurisdictionId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作" prop="operationIds">
          <el-checkbox-group v-model="form.operationIds">
            <el-checkbox
              v-for="item in operationInfo"
              :key="item.operationId"
              :label="item.operationName"
              :value="item.operationName"
            />
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="角色" prop="roleId">
          <el-select v-model="form.roleId" placeholder="请选择" clearables>
            <el-option
              v-for="item in role"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            />
          </el-select>
        </el-form-item>

        <el-form-item style="text-align: right">
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            保存
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import axios from "axios";
import {
  ElMessage,
  ElMessageBox,
  type FormInstance,
  type FormRules,
} from "element-plus";
import http from "@/http";

//功能下拉列表
const Jurisdiction = ref();

//角色权限分配
const tableData = ref();

//获取到的功能信息
const jurisdictionItem = ref();

//单个功能信息
const JurisdictionInfo = ref();

//操作
const operationInfo = ref();

//角色
const role = ref();

interface RuleForm {
  jurisdictionId: string;
  operationIds: string[];
  roleId: string;
}

const ruleFormRef = ref<FormInstance>();
//权限分配添加表单
const form = reactive<RuleForm>({
  jurisdictionId: "",
  operationIds: [],
  roleId: "",
});

//验证
const rules = reactive<FormRules<RuleForm>>({
  operationIds: [
    {
      type: "array",
      required: true,
      message: "请选择操作",
      trigger: "change",
    },
  ],
  roleId: [
    {
      required: true,
      message: "请选择角色",
      trigger: "change",
    },
  ],
});

//是否弹框
const dialogFormVisible = ref(false);

//分页
const currentPage = ref(1);
const pageSize = ref(15);
const totalCount = ref();

//获取功能信息列表
const getJurisdiction = () => {
  http.get("Readroute/api/Jurisdiction/GetAllJurisdiction").then((res) => {
    Jurisdiction.value = res.data;
  });
};

//获取权限分配
const getRoleJurisdiction = () => {
  http
    .get("Readroute/api/RoleJurisdiction/GetRoleJurisdiction", {
      params: {
        pageIndex: currentPage.value,
        pageSize: pageSize.value,
      },
    })
    .then((res) => {
      //console.log(res.data.datas);
      tableData.value = res.data.datas;
      totalCount.value = res.data.totalCount;
    });
};

//页容量改变
const handleSizeChange = (val: number) => {
  //console.log(`${val} items per page`);
  pageSize.value = val;
  getRoleJurisdiction();
};

//页序号改变
const handleCurrentChange = (val: number) => {
  //console.log(`current page: ${val}`);
  currentPage.value = val;
  getRoleJurisdiction();
};

//获取单条功能信息
const getJurisdictionInfo = () => {
  http
    .get(
      "Readroute/api/Jurisdiction/GetJurisdiction?JurisdictionId=" +
        jurisdictionItem.value
    )
    .then((res) => {
      //console.log(res.data);
      JurisdictionInfo.value = res.data;
      form.jurisdictionId = res.data.jurisdictionId;
      //console.log(JurisdictionInfo.value);
    });
};

//获取功能
const getOperation = () => {
  http.get("Readroute/api/Operation/GetAllOperations").then((res) => {
    operationInfo.value = res.data;
  });
};

//获取角色
const getRole = () => {
  http.get("Readroute/api/RoleInfo/GetAllRole").then((res) => {
    //console.log(res.data);
    role.value = res.data;
  });
};

//弹框
const add = () => {
  dialogFormVisible.value = true;

  getOperation();
  getRole();

  //console.log(jurisdictionItem);
  getJurisdictionInfo();
};

//添加
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      http
        .post(
          "http://localhost:5113/api/RoleJurisdiction/AddRoleJurisdiction",
          form
        )
        .then((res) => {
          if (res.data) {
            ElMessage.success("保存成功！");
          }
        });
    } else {
      return;
    }
  });
};

//重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

//删除
const del = (rjId: number) => {
  console.log(rjId);
  ElMessageBox.confirm("确定要删除吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "error",
  })
    .then(() => {
      http
        .delete("route/api/RoleJurisdiction/DelRoleJurisdiction?rjId=" + rjId)
        .then((res) => {
          if (res.data == 1) {
            ElMessage.success("删除成功！");
            getRoleJurisdiction();
          }
        });
    })
    .catch(() => {});
};

onMounted(() => {
  getJurisdiction();
  getRoleJurisdiction();
});
</script>
<stype>

</stype>